import React from "react";
import { Link } from '@sui/sui';
import styles from './sui.module.less';

export default function Readme({ demos, routesSet }) {

    return (
        <div className={styles.readme}>
            <div className={ styles.readme_inner }>
                <div className={ `${styles.readme_text_box} ${styles.readme_light_box}` }>
                    <div> - 🎉  欢迎使用SUI应用开发框架</div>
                    <div> - 🍔  如果你想开发一个基于路由的SPA，请配置路由 <code>`routes`</code> 信息，或者在 <code>`src/pages`</code> 文件下开发你的页面。SUI会读取 <code>`src/pages`</code> 的文件及目录结构自动生成路由。更多功能及配置见 sui.config.js</div>
                    <div> - 🍕  如果你想开发一个组件件库或单体组件, 请从 `src/index.js`入口导出模块开始。由 army-build 打包组件包能力, 更多组件相关配置见 .armyrc.js</div>
                    <div> - 🍗  如果您想共享你的应用或组件，可以打包并发布到内网的SNPM，也通过配置 `moduleFederation` 打包后发布到webpack module federation server, 实现运行时模块共享。</div>
                    <div> - 🍭  SUI v3 应用框架使用文档 <a href='http://170.18.10.145:7002/package/@sui/sui' target="_blank">[查看]</a></div>
                    <div> - ⛽  snpm 使用文档 <a href='http://170.18.10.145:7002/package/@sudy/snpm-tools' target="_blank">[查看]</a></div>
                    <div> - 🍰  army-build 组件打包器使用文档 <a href='https://www.npmjs.com/package/army-build' target="_blank">[查看]</a></div>
                </div>
                {demos && demos.length ?
                <div className={ styles.readme_text_box }>
                    <h3>示例</h3>
                    <ul>
                    {demos.map(demo=>{
                        return (
                            <li key={demo.path}>
                                <Link target={"demo"+demo.path} to={demo.path}>{demo.path}</Link>
                            </li>
                        )
                    })}
                    </ul>
                </div> : null }

                {routesSet && routesSet.length ?
                <div className={ styles.readme_text_box }>
                    <h3>页面</h3>
                    <ul>
                    {routesSet.map(path=>{
                        return (
                            <li key={path}>
                                <Link target={"page"+path} to={path}>{path}</Link>
                            </li>
                        )
                    })}
                    </ul>
                </div> : null }
            </div>
        </div>
    )
}